﻿<!DOCTYPE html>


<!-- A minimal demo of using two procedural equirectangular -->
<!-- texture generators at the same time -->


<html>

	<head>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

		<link rel="shortcut icon" type="image/png" href="../assets/logo/logo.png"/>
		<link rel="stylesheet" href="styles.css">

		<script type="importmap">
		  {
			"imports": {
			  "three": "https://cdn.jsdelivr.net/npm/three@0.164.0/build/three.module.js",
			  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.0/examples/jsm/",
			  "pet/": "https://cdn.jsdelivr.net/npm/pet-gen@1.7.1/src/"
			}
		  }
		</script>
	</head>


	<body>
		
		<script type="module">

			import * as THREE from "three";
			import { OrbitControls } from "three/addons/controls/OrbitControls.js";

			import * as TEMP from "pet/patterns/template.js";
			import {noiseSeed} from "pet/noise.js";
			import * as CAMO from "pet/patterns/camouflage.js";


			// setting up the scene

			var scene = new THREE.Scene();

			var camera = new THREE.PerspectiveCamera( 5, innerWidth/innerHeight );
			camera.position.set( 0, 0, 30 );

			var renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setSize( innerWidth, innerHeight );
			renderer.setAnimationLoop( animationLoop );
			document.body.appendChild( renderer.domElement );

			new OrbitControls( camera, renderer.domElement );

			function animationLoop( /*t*/ ) {

				renderer.render( scene, camera );

			}


			noiseSeed( 10 );
			
			// defining models with the same equirectangular
			// texture pattern, but with different parameters

			var mapA = TEMP.texture( { scale: 5, width: 512, height: 256 } );
			var mapB = CAMO.texture( CAMO.defaults );

			var modelA = new THREE.Mesh(
				new THREE.SphereGeometry( 1 ),
				TEMP.material( new THREE.MeshBasicMaterial( { map: mapA } ) )
			);

			var modelB = new THREE.Mesh(
				new THREE.SphereGeometry( 1 ),
				CAMO.material( new THREE.MeshBasicMaterial( { map: mapB } ) )
			);

			modelA.position.x = -1.1;
			modelB.position.x = 1.1;

			scene.add( modelA, modelB );

		</script>
	</body>
</html>